<template>
    <Editor
     :editorId="editorId" 
     :value="modelValue"
     :plugins="plugins"
     :locale="zhHans"
     :editorConfig="markdownEditorConfig"
     :sanitize="sanitizeSchema"
     :placeholder="placeholder"
     @change="handleChange"
     :uploadImages="handleUploadImages"
   />
</template>
<script setup lang="ts">
  import { Editor } from '@bytemd/vue-next'
  import zhHans from 'bytemd/locales/zh_Hans.json'
  import { markdownPlugins, markdownEditorConfig, sanitize } from '@/utils/markdownEditor'
  import type { BytemdPlugin } from 'bytemd'
  const props = defineProps({
    //markdown编辑器内容
   modelValue: {
     type: String,
     default: ''
   },
   //编辑器id
   editorId: {
     type: String,
     default: 'editor'
   },
   placeholder: {
     type: String,
     default: '请输入内容...'
   },
   availableTags: {
     type: Array as () => string[],
     default: () => ['toggleEditor']
   }
  })
  const emit = defineEmits(['update:modelValue'])
  // 编辑器插件
  const plugins = ref<BytemdPlugin[]>([...markdownPlugins])
  // 白名单
  const sanitizeSchema = (schema: any) => {
   schema = sanitize(schema)
   
   if(props.availableTags?.includes('embedVideo')) {
     schema.tagNames.push('iframe')
   }
   return schema
}
  // 内容变化处理
  const handleChange = (value: string) => {
   emit('update:modelValue', value)
  }
  // 图片上传处理
  const handleUploadImages = (files: File[]) => {
   // 这里实现具体的上传逻辑
   console.log('上传文件:', files)
   return [
     {
       title: files.map(f => f.name),
       url: 'http://...'
     }
   ]
  }
</script>

<style lang="scss" scoped>
:deep(.bytemd) {
  height: 400px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  
  .bytemd-toolbar {
    border-bottom: 1px solid #e8e8e8;
  }
  
  .bytemd-status {
    border-top: 1px solid #e8e8e8;
  }

  // 添加全屏样式，不然会被header挡住
  &.bytemd-fullscreen {
    z-index: 10001 !important;
  }
}
</style>